//实现账户登录和二维码登录的tab栏切换
document.addEventListener('DOMContentLoaded', function () {
    const Nav = document.querySelector('nav')
    const messageBox = document.querySelectorAll('.messageBox')
    Nav.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
            Nav.querySelector('a.active').classList.remove('active')
            e.target.classList.add('active')
            for (let i = 0; i < messageBox.length; i++) {
                messageBox[i].style.display = 'none'
            }
            messageBox[e.target.dataset.index].style.display = 'block'
        }
    })
})
//实现短信登录和账号登录的切换
const toggle = document.querySelector('.toggle')
const message = document.querySelectorAll('.message')
toggle.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        for (let i = 0; i < toggle.children.length; i++) {
            this.children[i].style.display = "block"
            message[i].style.display = 'block'
        }
        e.target.style.display = "none"
        message[e.target.dataset.id].style.display = 'none'
    }

})

//手机号判断
const phone = document.querySelector('[name=phone]')
const msg = document.querySelector('.msg1')
const formItem = document.querySelector('.formItem')
let span = document.querySelector('.msg1')
const rge = /^1[3-9]\d{9}$/
phone.addEventListener('focus', function (e) {
    formItem.style.outline = '2px solid #27ba9b'
})
phone.addEventListener('blur', function () {
    if (rge.test(phone.value)) {
        span.innerHTML = ''
        formItem.style.outline = '2px solid #27ba9b'
    } else {
        span.innerHTML = `* 请输入11位手机号`
        formItem.style.outline = '2px solid red'
    }
})

//短信验证码
const code = document.querySelector('.code')
let time = 10
let timeId = null
let flag = true
code.addEventListener('click', function () {
    if (flag) {
        flag = false
        time = 10
        code.innerHTML = `倒计时(${time})秒`
        clearInterval(timeId)
        timeId = setInterval(function () {
            time--
            if (time <= 0) {
                clearInterval(timeId)
                code.innerHTML = `重新获取`
                flag = true
                return
            }
            code.innerHTML = `倒计时(${time})秒`
        }, 1000)
    }
}
)



//密码数据持久化
let unameget = localStorage.getItem('uname')
const uname = document.querySelector('[name=username]')
uname.value = unameget
//用户名判断
uname.addEventListener('focus', function (e) {
    uname.style.outline = '2px solid #27ba9b'

})
const unfind = document.querySelector('.unfind')
uname.addEventListener('blur', verifyName)
function verifyName() {
    const msgA = document.querySelector('.msg2')
    const unamerge = /^[a-zA-Z0-9-_]{6,10}$/
    if (unamerge.test(uname.value)) {
        msgA.innerHTML = ''
        uname.style.outline = '1px solid #27ba9b'
        unfind.style.display = 'none'
        return true
    } else {
        msgA.innerHTML = `* 请输入正确的用户名`
        unfind.style.display = 'block'
        uname.style.outline = '1px solid red'
        return false
    }
}

//密码持久化

let pwdget = localStorage.getItem('pwd')

const pwd = document.querySelector('[name=password]')
pwd.value = pwdget

//密码验证
pwd.addEventListener('blur', verifypwd)
const msgC = document.querySelector('.msg4')
function verifypwd() {
    const reg = /^[a-zA-Z0-9-_]{6,20}$/
    if (reg.test(pwd.value)) {
        msgC.innerHTML = ''
        return true
    } else {
        msgC.innerHTML = `* 请输入正确的密码`
        pwd.style.outline = '2px solid red'
        return false
    }
}


//判断同意按钮的勾选
const agreebtn = document.querySelector('.icon-chenggong')
agreebtn.addEventListener('click', function () {
    agreebtn.classList.toggle('el-icon-success')

})

//数据校验
// const obj = {
//     uname: 'wangjuan',
//     pwd: 'w123456'
// }
// const pwd = document.querySelector('[name=password]')

const form = document.querySelector('.loginForm')
form.addEventListener('submit', function (e) {
    e.preventDefault()
    if (!uname.value) {
        unfind.style.display = 'block'
        return
    }
    if (!pwd.value) {
        msgC.innerHTML = `* 请输入正确的密码`
        return
    } else {
        msgC.innerHTML = ``
    }
    const ret = agreebtn.classList.contains('el-icon-success')
    if (!ret) {
        alert('请勾选同意协议')
        return
    }
    alert('登录成功')

    localStorage.setItem('uname', uname.value)
    localStorage.setItem('pwd', pwd.value)
    location.href = '../index.html'
})



